<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板字符串</title>
</head>

<body>
    <!-- 快捷键小技巧 -->
    <!-- div.box -->
    <!-- div#box -->
    <!-- p.box -->
    <!-- input#box -->

    <div class="box">

    </div>
    <script>
        //模板字符串：使用反引号``，插入变量时使用${变量名}
        const oBox = document.querySelector(".box");
        let id = 100;
        let name = "小马哥";
        let htmlStr = `<ul><li><p id=${id}>${name}</p></li></ul>`
        // oBox.innerHTML = "<ul><li><p id=" + id + ">" + name + "</p></li></ul>";
        // oBox.innerHTML = `<ul><li><p id=${id}>${name}</p></li></ul>`;
        oBox.innerHTML = htmlStr;

    </script>
</body>

</html>